Tiles

A tile is a grouping of related information associated with a record.

BaseBase › DefaultBase › Default with actionsBasedev ready

Preview

Code

<div class="slds-tile">
  <h3 class="slds-truncate" title="Salesforce UX"><a href="javascript:void(0);">Salesforce UX</a></h3>
  <div class="slds-tile__detail slds-text-body--small">
    <p class="slds-truncate">26 Members</p>
  </div>
</div>

IconIcon › DefaultIcon › With actionsIcondev ready

Preview

Code

<div class="slds-tile slds-media">
  <div class="slds-media__figure">
    <svg aria-hidden="true" class="slds-icon slds-icon-standard-groups">
      <use xlink:href="/assets/icons/standard-sprite/svg/symbols.svg#groups"></use>
    </svg>
  </div>
  <div class="slds-media__body">
    <h3 class="slds-truncate" title="Salesforce UX"><a href="javascript:void(0);">Salesforce UX</a></h3>
    <div class="slds-tile__detail slds-text-body--small">
      <dl class="slds-dl--horizontal">
        <dt class="slds-dl--horizontal__label">
          <p class="slds-truncate" title="Company">Company:</p>
        </dt>
        <dd class="slds-dl--horizontal__detail slds-tile__meta">
          <p class="slds-truncate" title="Salesforce">Salesforce</p>
        </dd>
        <dt class="slds-dl--horizontal__label">
          <p class="slds-truncate" title="Email">Email:</p>
        </dt>
        <dd class="slds-dl--horizontal__detail slds-tile__meta">
          <p class="slds-truncate" title="salesforce-ux@salesforce.com">salesforce-ux@salesforce.com</p>
        </dd>
      </dl>
    </div>
  </div>
</div>

AvatarAvatar › DefaultAvatar › With actionsAvatardev ready

Preview

Code

<div class="slds-tile slds-media">
  <div class="slds-media__figure">
    <span class="slds-avatar slds-avatar--circle slds-avatar--small">
      <img src="/assets/images/avatar2.jpg" alt="Person&#x27;s name" />
    </span>
  </div>
  <div class="slds-media__body">
    <h3 class="slds-truncate" title="Lexee L. Jackson"><a href="javascript:void(0);">Lexee L. Jackson</a></h3>
    <div class="slds-tile__detail slds-text-body--small">
      <ul class="slds-list--horizontal slds-has-dividers--right">
        <li class="slds-item">VP, Marketing</li>
        <li class="slds-item">Decision Maker</li>
      </ul>
    </div>
  </div>
</div>

TaskTask › DefaultTask › With actionsTaskdev ready

Preview

Code

<div class="slds-tile slds-media">
  <div class="slds-media__figure">
    <label class="slds-checkbox">
      <input type="checkbox" name="options" id="checkbox-01" />
      <span class="slds-checkbox--faux"></span>
      <span class="slds-form-element__label slds-assistive-text">Did you complete this task?</span>
    </label>
  </div>
  <div class="slds-media__body">
    <h3 class="slds-truncate" title="The Trammel Crow Company"><a href="javascript:void(0);">The Trammel Crow Company</a></h3>
    <div class="slds-tile__detail slds-text-body--small">
      <p class="slds-truncate">Assignee</p>
    </div>
  </div>
</div>

ArticleArticle › DefaultArticledev ready

Preview

Code

<div class="slds-tile">
  <h3 class="slds-truncate" title="Company One beats Company Two to the 200-mile affordable electric car"><a href="javascript:void(0);">Company One beats Company Two to the 200-mile affordable electric car</a></h3>
  <div class="slds-tile__detail slds-text-body--small">
    <p>by Steve Author</p>
    <ul class="slds-list--horizontal slds-has-dividers--right slds-tile__meta">
      <li class="slds-item">Breaking News</li>
      <li class="slds-item">1 day ago</li>
    </ul>
  </div>
</div>

ListListdev ready

Preview

Code

<ul class="slds-has-dividers--bottom-space">
  <li class="slds-item">
    <div class="slds-tile slds-media">
      <div class="slds-media__figure">
        <svg aria-hidden="true" class="slds-icon">
          <use xlink:href="/assets/icons/doctype-sprite/svg/symbols.svg#zip"></use>
        </svg>
      </div>
      <div class="slds-media__body">
        <h3 class="slds-truncate" title="SLDS_038.zip"><a href="javascript:void(0);">SLDS_038.zip</a></h3>
        <div class="slds-tile__detail slds-text-body--small">
          <ul class="slds-list--horizontal slds-has-dividers--right">
            <li class="slds-item">May 9th, 2015</li>
            <li class="slds-item">3.6mb</li>
          </ul>
        </div>
      </div>
    </div>
  </li>
  <li class="slds-item">
    <div class="slds-tile slds-media">
      <div class="slds-media__figure">
        <svg aria-hidden="true" class="slds-icon">
          <use xlink:href="/assets/icons/doctype-sprite/svg/symbols.svg#zip"></use>
        </svg>
      </div>
      <div class="slds-media__body">
        <h3 class="slds-truncate" title="SLDS_038.zip"><a href="javascript:void(0);">SLDS_038.zip</a></h3>
        <div class="slds-tile__detail slds-text-body--small">
          <ul class="slds-list--horizontal slds-has-dividers--right">
            <li class="slds-item">May 9th, 2015</li>
            <li class="slds-item">3.6mb</li>
          </ul>
        </div>
      </div>
    </div>
  </li>
  <li class="slds-item">
    <div class="slds-tile slds-media">
      <div class="slds-media__figure">
        <svg aria-hidden="true" class="slds-icon">
          <use xlink:href="/assets/icons/doctype-sprite/svg/symbols.svg#zip"></use>
        </svg>
      </div>
      <div class="slds-media__body">
        <h3 class="slds-truncate" title="SLDS_038.zip"><a href="javascript:void(0);">SLDS_038.zip</a></h3>
        <div class="slds-tile__detail slds-text-body--small">
          <ul class="slds-list--horizontal slds-has-dividers--right">
            <li class="slds-item">May 9th, 2015</li>
            <li class="slds-item">3.6mb</li>
          </ul>
        </div>
      </div>
    </div>
  </li>
</ul>

BoardBoarddev ready

Preview

Code

<ul class="slds-has-dividers--around-space">
  <li class="slds-item">
    <div class="slds-tile slds-tile--board">
      <h3 class="slds-truncate" title="Anypoint Connectors"><a href="javascript:void(0);">Anypoint Connectors</a></h3>
      <div class="slds-tile__detail slds-text-body--small">
        <p class="slds-text-heading--medium">$500,000</p>
        <p class="slds-truncate"><a href="javascript:void(0);">Company One</a></p>
        <p class="slds-truncate">Closing 9/30/2015</p>
      </div>
    </div>
  </li>
  <li class="slds-item">
    <div class="slds-tile slds-tile--board">
      <h3 class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></h3>
      <div class="slds-tile__detail slds-text-body--small">
        <p class="slds-text-heading--medium">$185,000</p>
        <p class="slds-truncate"><a href="javascript:void(0);">Company Two</a></p>
        <p class="slds-truncate slds-has-alert">Closing 12/15/2015</p>
        <span class="slds-icon_container slds-tile--board__icon">
          <svg aria-hidden="true" class="slds-icon slds-icon-text-warning slds-icon--x-small">
            <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#warning"></use>
          </svg>
          <span class="slds-assistive-text">Warning Icon</span>
        </span>
      </div>
    </div>
  </li>
  <li class="slds-item">
    <div class="slds-tile slds-tile--board">
      <h3 class="slds-truncate" title="600 Widgets"><a href="javascript:void(0);">600 Widgets</a></h3>
      <div class="slds-tile__detail slds-text-body--small">
        <p class="slds-text-heading--medium">$35,000</p>
        <p class="slds-truncate"><a href="javascript:void(0);">Company Three</a></p>
        <p class="slds-truncate">Closing 10/12/2015</p>
      </div>
    </div>
  </li>
</ul>

Component Overview

Tiles can have different groupings of information based on its context. Pay close attention to the markup, as each tile layout is constructed differently.

Include other optional elements, such as images, icons, action overflows, and description lists, within the containing tile.

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-tile
Applied to:

<div>

Outcome:

Initializes tile

Required:

Required

Comments:

--

.slds-tile__detail
Applied to:

<div> or <ul>

Outcome:

Required:

Required

Comments:

--

.slds-tile__meta
Applied to:

Any element inside .slds-tile__detail

Outcome:

Applies text color change

Required:

No, optional element or modifier

Comments:

--

.slds-media
Applied to:

.slds-tile

Outcome:

Layout helper that aligns image and text

Required:

No, optional element or modifier

Comments:

Use on tiles with Icons, Actions and Badges

.slds-media__body
Applied to:

<div>

Outcome:

Layout helper

Required:

No, optional element or modifier

Comments:

Wraps .slds-tile__title and .slds-tile__detail inside a .slds-media object.

.slds-truncate
Applied to:

Outcome:

Applies overflow truncation to tile detail items

Required:

No, optional element or modifier

Comments:

Can be applied to anything that needs truncation

.slds-list--horizontal
Applied to:

<ul>

Outcome:

Horizontally aligns list items

Required:

No, optional element or modifier

Comments:

--

.slds-has-dividers--right
Applied to:

.slds-list--horizontal

Outcome:

Adds dotted dividers in a horizontal list

Required:

No, optional element or modifier

Comments:

--

.slds-grid
Applied to:

Outcome:

Initializes a grid layout

Required:

No, optional element or modifier

Comments:

Wrap .slds-tile__title and icon/badge element

.slds-grid--align-spread
Applied to:

.slds-grid

Outcome:

Spreads the elements on each end of the same axis

Required:

No, optional element or modifier

Comments:

--

.slds-has-flexi-truncate
Applied to:

.slds-col

Outcome:

Layout helper applied to a parent .slds-grid when .slds-truncate is within a flex element

Required:

No, optional element or modifier

Comments:

--

.slds-hint-parent
Applied to:

.slds-tile

Outcome:

Highlights dimmed action overflow icons on tile hover

Required:

No, optional element or modifier

Comments:

--